<template>
  <div class="charts">
    <div class="table-charts">
      <div class="table"></div>
      <div class="gouge"></div>
    </div>
    <div class="line-charts">
      <div class="line"></div>
      <div class="gouge"></div>
    </div>
  </div>
</template>

<script>
import * as ec from 'echarts';
import { addDays, format } from 'date-fns';

const pathes = [
  'M936.857805 523.431322c0 0-42.065715-68.89513-88.786739-68.89513-46.68416 0-95.732122 71.223091-95.732122 71.223091s-44.28544-72.503296-93.440922-71.152538c-35.565466 0.977306-62.89705 30.882406-79.124275 64.06615L579.773747 790.800797c-3.253248 37.391565-5.677568 50.904371-12.002816 69.63497-6.651802 19.698688-19.544883 35.227341-31.650099 45.909606-14.30231 12.621414-29.59831 22.066586-45.854208 27.424563-16.28969 5.362074-30.098739 6.496973-51.536794 6.496973-19.498906 0-36.95104-2.963456-52.395418-8.850534-15.410586-5.887078-28.420403-14.313984-39.034573-25.246003-10.613146-10.930995-18.757939-24.08151-24.435507-39.525171-5.676544-15.443763-8.532685-40.195482-8.532685-59.270963l0-26.232454 74.435273 0c0 24.644301-0.17705 64.452915 8.81408 77.006848 9.02697 12.515021 22.756147 18.092032 41.148826 18.791014 16.728678 0.636518 30.032179-8.061645 30.032179-8.061645s11.922022-10.5472 14.992077-19.756954c2.674995-8.025805 3.565363-22.180147 3.565363-22.180147s2.080461-21.789286 2.080461-34.234675L489.399906 514.299369c-16.678502-18.827776-43.801395-61.938688-82.756096-60.927693-54.699008 1.419366-100.422144 70.059622-100.422144 70.059622s-56.065126-70.059622-93.440922-70.059622c-37.376717 0-91.077939 70.059622-91.077939 70.059622S105.343488 156.737741 476.742042 119.363584l53.70327-74.714624 51.373056 74.714624C964.889395 142.740992 936.857805 523.431322 936.857805 523.431322z',
];

export default {
  data() {
    return {};
  },
  mounted() {
    this.initTable();
    this.initLine();
    this.initGouge();
  },
  methods: {
    initGouge() {
      const charts = ec.init(document.querySelector('.gouge'));
      charts.setOption({
        series: [{
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false,
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: false,
            clip: false,
            itemStyle: {
              borderWidth: 0,
            },
          },
          axisLine: {
            lineStyle: {
              width: 10,
            },
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
            distance: 50,
          },
          data: [{
            value: 90,
            name: 'AQI等级',
            title: {
              fontSize: 14,
              fontWeight: 'normal',
              offsetCenter: ['0%', '20%'],
            },
            detail: {
              fontSize: 30,
              fontWeight: 'normal',
              formatter: '{value}%',
              offsetCenter: ['0%', '-20%'],
            },
          },
          ],
        }],
      });
    },
    initLine() {
      const tableChart = ec.init(document.querySelector('.line'));
      const lineData = this.generateLineData();
      tableChart.setOption({
        legend: {
          show: true,
        },
        tooltip: {
          trigger: 'item',
          show: true,
          formatter(tool) {
            if (Array.isArray(tool)) {
              return `${format(tool[0].data[0], 'yyyy-MM-dd')}<br />实况监测:良<br />人工预报:良`;
            }
            return null;
          },
        },
        dataZoom: [{
          type: 'inside',
          xAxisIndex: 0,
          minSpan: 5,
        }, {
          type: 'slider',
          xAxisIndex: 0,
          minSpan: 5,
          bottom: '10%',
          labelFormatter: (value, valueStr) => this.formatDate(valueStr),
        }],
        grid: {
          show: false,
          top: '15%',
          bottom: '40%',
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            formatter: this.formatDate,
          },
          axisPointer: {
            type: 'shadow',
            show: true,
            label: {
              show: false,
            },
            shadowStyle: {
              color: 'rgba(0,0,0,0.15)',
            },
          },
        },
        yAxis: [{
          show: true,
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'black',
            },
          },
        }, {
          show: true,
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          position: 'right',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'black',
            },
          },
        }],
        series: [{
          type: 'line',
          name: '实况监测',
          showSymbol: false,
          smooth: true,
          symbol: 'none',
          color: 'orange',
          encode: {
            x: 0,
            y: 1,
          },
          data: lineData,
        }, {
          type: 'custom',
          name: '人工预报',
          data: lineData,
          renderItem(params, api) {
            // const center = api.coord([api.value(0), api.value(1)]);
            const hight = api.coord([api.value(0), api.value(2)]);
            const low = api.coord([api.value(0), api.value(3)]);
            return {
              type: 'group',
              children: [
                {
                  type: 'line',
                  shape: {
                    x1: hight[0],
                    y1: hight[1],
                    x2: low[0],
                    y2: low[1],
                  },
                  style: {
                    stroke: 'green',
                  },
                },
                {
                  type: 'circle',
                  shape: {
                    cx: hight[0],
                    cy: hight[1],
                    r: 2,
                  },
                  style: {
                    fill: 'green',
                  },
                },
                {
                  type: 'circle',
                  shape: {
                    cx: low[0],
                    cy: low[1],
                    r: 2,
                  },
                  style: {
                    fill: 'green',
                  },
                },
              ],
            };
          },
        }],
      });
    },
    initTable() {
      const tableChart = ec.init(document.querySelector('.table'));
      tableChart.setOption({
        legend: {
          data: ['优', '良', '中度污染', '重度污染', '严重污染'],
          selectedMode: false,
        },
        tooltip: {
          show: true,
          formatter(tool) {
            if (Array.isArray(tool)) {
              return `${format(tool[0].data[1], 'yyyy-MM-dd')}<br />实况监测:良<br />人工预报:良`;
            }
            return null;
          },
        },
        grid: {
          show: false,
        },
        xAxis: {
          type: 'category',
          splitLine: {
            show: true,
            interval: 2,
            lineStyle: {
              color: 'lightgray',
            },
          },
          axisPointer: {
            show: true,
            type: 'shadow',
            label: {
              show: false,
            },
            shadowStyle: {
              color: 'rgba(0,0,0,0.15)',
            },
          },
          axisTick: {
            alignWithLabel: false,
          },
          axisLabel: {
            formatter: this.formatDate,
          },
          data: this.generateYearsData(),
        },
        yAxis: [{
          show: true,
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'black',
            },
          },
        }, {
          show: true,
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          position: 'right',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'black',
            },
          },
        }],
        series: this.generateTableData(),
      });
    },
    generateLineData() {
      const yearsData = this.generateYearsData();
      const baseLine = 30;

      return yearsData.map((item) => {
        const target = baseLine + (Math.ceil(Math.random() * 100));
        const hgiht = target - (Math.ceil(Math.random() * 20));
        const low = target + (Math.ceil(Math.random() * 20));
        return [
          item,
          target,
          hgiht,
          low,
        ];
      });
    },
    generateTableData() {
      return ['优', '良', '中度污染', '重度污染', '严重污染'].map(item => ({
        name: item,
        type: 'custom',
        encode: {
          x: 0,
          y: [1, 2, 3, 4],
        },
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        renderItem(params, api) {
          const frame = params.coordSys;
          const width = api.size([1, 0]);
          const point = api.coord([api.value(0), api.value(1)]);

          return {
            type: 'group',
            children: [
              // {
              //   type: 'rect',
              //   info: '背景用',
              //   style: {
              //     fill: 'transparent',
              //   },
              //   focus: 'self',
              //   emphasis: {
              //     style: {
              //       shadowBlur: 8,
              //       fill: 'lightgray',
              //     },
              //   },
              //   shape: {
              //     x: point[0] - (width[0] / 2),
              //     y: frame.y,
              //     width: width[0],
              //     height: frame.height,
              //   },
              // },
              {
                type: 'path',
                style: {
                  fill: 'green',
                },
                info: '图标，可以替换',
                z2: 11,
                shape: {
                  pathData: pathes[0],
                  x: point[0] - ((width[0] / 2) - (width[0] * 0.1)),
                  y: frame.y + (width[0] * 0.1),
                  width: width[0] * 0.8,
                  height: width[0] * 0.8,
                  layout: 'center',
                },
              },
              {
                type: 'line',
                info: '顶部border',
                shape: {
                  x1: point[0] - (width[0] / 2),
                  y1: frame.y + 20 + 5,
                  x2: point[0] + (width[0] / 2),
                  y2: frame.y + 20 + 5,
                },
                z2: 10,
                y: 42,
                scaleY: 0.5,
                style: {
                  stroke: 'black',
                },
              },
              {
                type: 'line',
                info: '图标下方的border',
                shape: {
                  x1: point[0] - (width[0] / 2),
                  y1: frame.y,
                  x2: point[0] + (width[0] / 2),
                  y2: frame.y,
                },
                style: {
                  stroke: 'black',
                  lineWidth: 1,
                  fill: null,
                },
              },
              {
                type: 'rect',
                info: '人工检测色块',
                style: {
                  fill: 'green',
                },
                emphasis: {
                  style: {
                    fill: 'green',
                  },
                },
                z2: 11,
                focus: 'none',
                shape: {
                  x: point[0] - ((width[0] / 2) - (width[0] * 0.2)),
                  y: frame.y + 25,
                  width: width[0] * 0.6,
                  height: 15,
                },
              },
              {
                type: 'rect',
                info: '人工检测色块',
                style: {
                  fill: api.value(0) % 2 === 0 ? 'yellow' : 'transparent',
                },
                emphasis: {
                  style: {
                    fill: api.value(0) % 2 === 0 ? 'yellow' : 'transparent',
                  },
                },
                z2: 11,
                focus: 'none',
                shape: {
                  x: point[0] - ((width[0] / 2) - (width[0] * 0.2)),
                  y: frame.y + 50,
                  width: width[0] * 0.6,
                  height: 10,
                },
              },
              {
                type: 'rect',
                info: '人工检测色块',
                style: {
                  fill: 'orange',
                },
                emphasis: {
                  style: {
                    fill: 'orange',
                    shadowBlur: 6,
                    shadowColor: 'gray',
                  },
                },
                z2: 11,
                focus: 'none',
                shape: {
                  x: point[0] - ((width[0] / 2) - (width[0] * 0.2)),
                  y: frame.y + 60,
                  width: width[0] * 0.6,
                  height: 10,
                },
              },
            ],
          };
        },
        data: this.generateYearsData().map((data, index) => [index, data, 3, 4, 5]),
      }));
    },
    formatDate(data) {
      return format(Number(data), 'yyyy-MM-dd');
    },
    generateYearsData() {
      const years = [];
      const start = new Date('2020-04-01 00:00').getTime();
      for (let i = 0; i <= 40; i += 1) {
        years.push(addDays(start, i).getTime());
      }
      return years;
    },
  },
};
</script>

<style>
  .charts {
    width: 100%;
    height: 400px;
  }

  .line-charts, .table-charts {
    height: 200px;
    width: 100%;
    display: flex;
  }

  .line, .table {
    width: 70%;
    height: 100%;
  }

  .gouge {
    height: 100%;
    width: 30%;
  }

</style>
